<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>派生、子代选择器</title>
		<style>
			/* ①派生【后代】选择器：抓取元素，祖先元素内找所有匹配的子孙元素
			 语法：祖先任意选择器 后代任意选择器{}
			 */
			#header span{
				display: block;
				width: 50%;
				background-color: #00ffff;
			}
			/* 子代选择器：抓取元素，父元素内找所有匹配的子元素
			 语法：父元素任意选择器》子元素 任意选择器{}
			 */
			#header>span{
				background-color: #ffaa00;
			}
			#header>span:hover{
				background-color: #00ff7f;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<span>左侧导航区</span>
			<span> <div class="header">
			<span>右侧导航区1</span>
			<span>右侧导航区2</span>
			</div>
			</span>
		</div>
	</body>
</html>